<script setup>
import { getmostExpected, getcomingList,  getmoreComingList } from '../../api/home';
import { onMounted,reactive } from 'vue';
import MovieInfo2 from '../MovieInfo2.vue'
const data = reactive({
    coming:[],
    watiList:[]
})


onMounted(()=>{
    getmostExpected().then(res=>{
        console.log('最受期待电影',res);
        data.coming = res.data.coming
    })

    getcomingList().then(res=>{
        console.log('期待列表',res);
        data.watiList = res.data.coming
    })

    getmoreComingList().then(res=>{
        console.log('res',res);
        
    })
})
</script>
<template>
    <div class="hot-movie">
        <div class="top-pop">
            <div class="top-title">最近最受期待</div>
            <div class="top-rate-list">
                <router-link  class="top-rate-item" v-for="item in data.coming" :key="item.coming" :to="'/detail?movieId='+item.id">
                    <div class="poster">
                        <img :src="item.img" alt="">
                        <div class="aixing"></div>
                        <div class="rate">
                            <span class="score">{{ item.wish}}</span>
                            <span>人想看</span>
                        </div>
                    </div>
                    <p>{{ item.nm}}</p>
                    <div class="time"><p>{{ item.comingTitle }}</p></div>
                    
                </router-link>
            </div>
        </div>
        <div class="bg-bar"></div>
        <MovieInfo2 :list="data.watiList"></MovieInfo2>
        <div class="blank"></div>
    </div>
</template>
<style scoped lang="scss">
::-webkit-scrollbar{
    display: none;
}
.hot-movie{
    padding: 15px ;
    height:calc(100vh - 100px);
    overflow-y:auto;
    .top-pop{
        padding-bottom: 20px;
        .top-title{
            font-size: 14px;
            color: #333;
        }

        .top-rate-list{
            display: flex;
            margin-top: 12px;
            overflow-x: auto;
            
            .top-rate-item{
                margin-right: 10px;
                width: 80px;
                .poster{
                    width: 80px;
                    height: 115px;
                    position: relative;
                    overflow: hidden;
                    img{
                        width: 100%;
                        height: 100%;
                    }
                    .aixing{
                        position: absolute;
                        top: 0;
                        left: 0;
                        width: 16px;
                        height: 16px;
                        background-image: url('src/assets/images/aixing.png');
                        background-size:contain;
                        background-color: rgba(255, 255, 255, 0.5);
                    }
                    .rate{
                        position: absolute;
                        bottom: 0px;
                        width: 100%;
                        font-size: 11px;
                        color: #FAAf00;
                        font-weight: 600;
                        background-image: linear-gradient(-180deg,rgba(77,77,77,0),#000);
                        height: 35px;
                        line-height: 50px;
                        padding-left: 3px;
                        .score{
                            margin-left: 3px;
                            font-weight: 800;
                        }
                    }
                    
                }
                .time{

                    p{
                    font-size:12px;
                    color: #999;
                    }
                }

                p{
                    font-size: 12px;
                    color: #222;
                    margin-top: 10px;
                    font-weight: 600;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    word-break: break-all;
                }
            }
        }
    }

    .bg-bar{
        background-color: #f5f5f5;
        width: 375px;
        margin-left: -15px;
        height: 10px;
    }
}

.blank{
    width: 100%;
    height: 50px;
}
</style>